import React, { Component } from 'react'
import styles from './index.css'
import { ChartCard, Field, MiniArea, MiniBar } from 'ant-design-pro/lib/Charts';
import Trend from 'ant-design-pro/lib/Trend';
import NumberInfo from 'ant-design-pro/lib/NumberInfo';
import { Row, Col, Icon, Button, Input, DatePicker, Select, Spin } from 'antd';
import Authorized, { havePermission } from '@/utils/Authorized';
const Option = Select.Option;
import { connect } from 'dva';
import numeral from 'numeral';
import locale from 'antd/lib/date-picker/locale/zh_CN';
import moment from 'moment';
moment.locale('zh-cn');

@connect(({ count, loading }) => ({ 
    userList: count.userList,
    userCountList: count.userCountList,
    userCountErrList: count.userCountErrList,
    total: count.total,
    totalErr: count.totalErr,
    type: count.type,
    fetchSelCountByCurrentUserLoading: loading.effects['user/fetchSelCountByCurrentUser'],
    fetchSelUserByUsernameLikeLoading: loading.effects['user/fetchSelUserByUsernameLike'],
}))
class CountView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            userId:null, //用户id
            startTime:null, //开始时间
            endTime:null, //结束时间
        };
    }

    startTimeOnChange = (e) => {
        this.setState({
            startTime: e
        })
    }

    endTimeOnChange = (e) => {
        this.setState({
            endTime: e
        })
    }

    fetchUser = (username) => {
        const { dispatch } = this.props
        dispatch({
            type: 'count/fetchSelUserByUsernameLike',
            payload: {
                username: username
            }
        })
    }

    handleChange = (value) => {
        this.setState({
            userId: value.key
        })
    }

    render() {
        const { userId, userName, startTime, endTime } = this.state
        const { userList, userCountList, userCountErrList, total, totalErr, type, fetchSelCountByCurrentUserLoading, fetchSelUserByUsernameLikeLoading } = this.props
        console.log("囧", userCountList, userCountErrList)
        return (
            <div>
                <Row>
                    <Col span={24}>
                        <ChartCard
                            contentHeight={40}
                            className = {styles.qsBox}
                        >
                            <Select 
                                    className = {styles.inp}
                                    placeholder={"统计方式"}
                                    allowClear={true}
                                    onSelect={(e)=>{
                                        const { dispatch } = this.props
                                        dispatch({
                                            type: 'count/setType',
                                            payload: {
                                                type: e,
                                            }
                                        })
                                    }}>
                                    <Option value={"year"}>年</Option>
                                    <Option value={"month"}>月</Option>
                                    <Option value={"day"}>日</Option>
                            </Select>
                            <DatePicker 
                                    className = {styles.inp}
                                    placeholder="开始时间"
                                    value={startTime}
                                    locale={locale}
                                    format="YYYY-MM-DD HH:mm:ss"
                                    onChange={this.startTimeOnChange}
                                    showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
                                />
                            <DatePicker 
                                className = {styles.inp}
                                placeholder="结束时间"
                                value={endTime}
                                locale={locale}
                                format="YYYY-MM-DD HH:mm:ss"
                                onChange={this.endTimeOnChange}
                                showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
                                />
                            <Authorized authority={havePermission("AUTH_STATISTICS_SEL")}>
                                <Select 
                                    className = {styles.inp}
                                    showSearch
                                    labelInValue
                                    placeholder={"用户"}
                                    onSearch={this.fetchUser}
                                    onChange={this.handleChange}
                                    notFoundContent={ null }
                                    defaultActiveFirstOption={false}
                                    showArrow={false}
                                    filterOption={false}
                                    >
                                    {userList.map(d => <Option key={d.id}>{d.username}</Option>)}
                                </Select>
                            </Authorized>
                            <Button type="primary" style={{marginLeft: '20px'}} 
                                loading = { fetchSelCountByCurrentUserLoading }
                                onClick = {this.query}
                            >查询</Button>
                        </ChartCard>
                    </Col>
                    <Col span={24} style={{ marginTop: 24 }}>
                    <ChartCard
                        title="短信发送数量"
                        contentHeight={110}
                    >
                        <MiniArea
                            line
                            height={85}
                            data={userCountList}
                        />
                    </ChartCard>
                    </Col>
                    <Col span={24} style={{ marginTop: 24 }}>
                    <ChartCard
                        title="短信发送失败数量"
                        contentHeight={110}
                    >
                        <MiniArea
                            color={"rgba(128, 25, 25, 0.2)"}
                            borderColor={"#801919"}
                            line
                            height={85}
                            data={userCountErrList}
                        />
                    </ChartCard>
                    </Col>
                    <Col span={24} style={{ marginTop: 24 }}>
                    <ChartCard
                        title="统计"
                        contentHeight={40}
                    >
                        <span>
                            发送总数 
                        </span>
                        <span style={{ marginLeft: 8 }}>
                            {total}
                        </span>
                        <span style={{ marginLeft: 16 }}>
                            失败总数
                        </span>
                        <span style={{ marginLeft: 8 }}>
                            {totalErr}
                        </span>
                    </ChartCard>
                    </Col>
                </Row>
            </div>
        )
    }

    componentDidMount(){
        let action = 'count/fetchSelCountByCurrentUser'
        if(havePermission('AUTH_STATISTICS_SEL')){
            action = 'count/fetchSelCountByUserId'
        }
        const { dispatch, type } = this.props
        dispatch({
            type: action,
            payload: {
                type: type,
            }
        })
    }

    query = () => {
        let action = 'count/fetchSelCountByCurrentUser'
        if(havePermission('AUTH_STATISTICS_SEL')){
            action = 'count/fetchSelCountByUserId'
        }
        const { dispatch, type } = this.props
        const { userId, startTime, endTime } = this.state
        dispatch({
            type: action,
            payload: {
                type: type,
                startTime: startTime,
                endTime: endTime,
                userId: userId
            }
        })
    }
}

export default CountView